<template>
  <div class="kaoshi">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="top" :disabled="disabled">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" maxlength="10"/>
      </el-form-item>
      <el-form-item label="身份证号码" prop="idCard">
        <el-input v-model="form.idCard" placeholder="请输入身份证号码" maxlength="20"/>
      </el-form-item>
      <!--        <el-form-item label="出生日期" prop="birthDate">-->
      <!--          <el-input v-model="form.birthDate" placeholder="请输入出生日期" />-->
      <!--        </el-form-item>-->


<!--      <el-form-item prop="cardFront" >-->
<!--        <template slot="label">-->
<!--          <span>身份证（人像面）</span> <span class="note" @click="showDemo('zheng.png')"> <i-->
<!--          class="el-icon-warning"></i> 示例</span>-->
<!--        </template>-->

<!--        <div>注：身份证照片需包含完整边框（实测边框宽度需≥2mm）</div>-->
<!--        <ImageUpload :limit="1" v-model="form.cardFront" :fileSize="10" :data="{name:'cardFront'}"-->
<!--                     :fileType="['png', 'jpg', 'jpeg']" :isCallBack="handleCardFront"></ImageUpload>-->
<!--      </el-form-item>-->



<!--      <el-form-item prop="cardBack">-->
<!--        <template slot="label">-->
<!--          <span>身份证（国徽面）</span> <span class="note" @click="showDemo('fan.png')"> <i class="el-icon-warning"></i> 示例</span>-->
<!--        </template>-->
<!--        <ImageUpload :limit="1" v-model="form.cardBack" :fileSize="10" :data="{name:'cardBack'}"-->
<!--                     :fileType="['png', 'jpg', 'jpeg']" :isCallBack="handleCardBack"></ImageUpload>-->
<!--      </el-form-item>-->




      <el-form-item>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </el-form-item>

    </el-form>



    <el-dialog :visible.sync="demoOpen"
               title="示例"
               width="80%"
               height="80%"
               append-to-body>
      <img :src="getImageUrl()" style="display: block; max-width: 100%; margin: 0 auto"/>
      <!--      <img src="@/assets/images/zhengjianzhao.jpg">-->
    </el-dialog>

  </div>
</template>

<script>
import {addUserInfo} from "@/api/system/userInfo";

export default {
  name: "UserInfoAdd",
  data() {
    return {
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      // 遮罩层
      disabled:false,
      loading: true,
      demoImg: undefined,
      demoOpen: false,
      form: {},
      // 表单校验
      rules: {
        name: [
          {required: true, message: "姓名不能为空", trigger: "blur"}
        ],
        idCard: [
          {required: true, message: "身份证号码不能为空", trigger: "blur"},
          {
            pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\dXx]$/,
            message: "请输入正确的身份证号",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
  },
  methods: {
    handleCardBack(obj){
      console.log(obj)
    },
    handleCardFront(obj){
      console.log(obj)
    },
    getImageUrl() {
      if (this.demoImg) {
        return require(`@/assets/images/` + this.demoImg);
      }
    },

    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        name: '',
        idCard: '',
      };
      this.resetForm("form");
    },
    showDemo(type) {
      this.demoImg = type
      this.demoOpen = true
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addUserInfo(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.$router.push({path: "/kaoshi/shouye"}).catch(() => {
            })
          });
        }

      });
    },


  }
};
</script>


<style scoped lang="scss">
html, body {
  overscroll-behavior: contain; /* 禁止惯性滚动 */
  height: 100%;
  overflow: hidden; /* 根据实际需求调整 */
}

::-webkit-scrollbar-button {
  display: none; /* 消除下拉箭头 */
}

.kaoshi {
  width: 100vw;
  touch-action: pan-y;
  display: grid;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
}



.note {
  font-size: 14px;
  margin-left: 10px;
  color: #3a8ee6;
}

</style>
